<template>
  <div class="home">
    <div class="fanyaData">
      <!-- 顶部按钮 -->
      <div class="btn_group">
        <!-- 上传 -->
        <button class="btn_update" @click="updateFile">上传</button>
        <!-- 搜索框 -->
        <div class="dataSearch">
          <!-- 输入框 -->
          <input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" />
          <!-- 放大镜 -->
          <input type="button" class="ipt_fdj" @click="getFiles" />
          <!-- 搜索按钮 -->
          <button type="button" class="ipt_search" @click="getFiles">搜索</button>
        </div>
      </div>
      <div class="info">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <span v-for="(item, i) in breadcrumb" :key="item.key" @click="goBack(i)">{{ item.name }}</span>
        </div>
        <div>
          <!-- 已选个数 -->
          <span v-show="checkedList.length">
            已选&nbsp;<span style="color: #3A8BFF;">{{ this.checkedList.length }}</span>&nbsp;个，
          </span>
          <!-- 总数 -->
          <span>共&nbsp;{{ count }}&nbsp;个</span>
        </div>
      </div>
      <!-- 表格区 -->
      <div class="tableData">
        <!-- 表头 -->
        <div class="table_header table_row">
          <div :style="{flex: 1}">
            <input type="checkbox" :checked="allBoxValue" @click="checkAll" />
          </div>
          <div :style="{flex: 11}">文件名</div>
          <div :style="{flex: 4}"></div>
          <div :style="{flex: 2}">大小</div>
          <div :style="{flex: 3}">创建者</div>
          <div :style="{flex: 3}">
            创建日期
            <span :class="formData.reverse ? 'sort_down' : 'sort_up'" @click="sortList"></span>
          </div>
        </div>
        <!-- 列表 -->
        <div class="table_list">
          <!-- 文件夹 -->
          <div v-for="(item, i) in files.folder" :key="item.id" class="list_item table_row" :class="{active: checkedList.indexOf(item.id) !== -1}">
            <div :style="{flex: 1}">
              <input type="checkbox" disabled />
            </div>
            <div :style="{flex: 11}" @click="clickFolder(i)">
              <img :src="item.img_src" alt  src="../../../public/images/PDF.png" />
              <a href="javascript:;">{{ item.name }}</a>
            </div>
            <div :style="{flex: 4}"></div>
            <div :style="{flex: 2}">{{ item.size }}</div>
            <div :style="{flex: 3}">{{ item.author }}</div>
            <div :style="{flex: 3}">{{ item.date }}</div>
          </div>
          <!-- 文件 -->
          <div v-for="(item, i) in files.file" :key="item.id" class="list_item table_row" :class="{active: checkedList.indexOf(item.id) !== -1}">
            <div :style="{flex: 1}">
              <input type="checkbox" name="file" v-model="checkedList" :value="item.id" />
            </div>
            <div :style="{flex: 11}" @click="clickFile(i)">
              <img :src="item.img_src" alt  src="../../../public/images/file.png"/>
              <a href="javascript:;">{{ item.name }}</a>
            </div>
            <div :style="{flex: 4}"></div>
            <div :style="{flex: 2}">{{ item.size }}</div>
            <div :style="{flex: 3}">{{ item.author }}</div>
            <div :style="{flex: 3}">{{ item.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      // 面包屑
      breadcrumb: [
        { name: '全部文件', id: 0}
      ],
      // 表单数据
      formData: {
        // 上级文件夹id，默认全部文件最上层为0
        id: 0,
        // 搜索框内容
        search: '',
        // 是否逆序
        reverse: false
      },
      // 文件列表
      files: {
        folder: [
          { id: 0, img_src: '../public/images/file.png', date: '2021-10-22 00:46', size: '-', author: '王硕', name: '这是一个文件夹' }
        ],
        file: [
          { id: 1, img_src: '../../../public/images/word.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个word文档', href: '' },
          { id: 2, img_src: '../../../public/images/PDF.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个PDF文档', href: '' },
          { id: 3, img_src: '../../../public/images/zip.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个zip文件', href: '' },
          { id: 4, img_src: '../../../public/images/word.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个word文档', href: '' },
          { id: 5, img_src: '../../../public/images/word.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个word文档', href: '' },
          { id: 6, img_src: '../../../public/images/word.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个word文档', href: '' },
          { id: 7, img_src: '../../../public/images/word.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个word文档', href: '' },
          { id: 8, img_src: '../../../public/images/word.png', date: '2021-10-22 00:46', size: '20KB', author: '王硕', name: '这是一个word文档', href: '' }
        ]
      },
      // 被选中的文件id列表
      checkedList: []
    }
  },
  computed: {
    // 文件总数
    count() {
      return this.files.folder.length + this.files.file.length
    },
    // 全选按钮状态
    allBoxValue() {
      return this.checkedList.length === this.files.file.length
    }
  },
  created() {
    this.getFiles()
  },
  methods: {
    // 获取文件列表
    async getFiles() {
      // 清空被选中文件id列表
      this.checkedList = []
      console.log('获取文件列表')
      // params参数：文件夹id、搜索的值、是否逆序
      // this.files = await axios.get('/files', { params: this.formData })
    },
    // 上传文件
    updateFile() {
      alert('上传文件')
    },
    // 点击某文件夹
    clickFolder(index) {
      // 更新面包屑导航
      this.breadcrumb.push({
        name: this.files.folder[index].name,
        id: this.files.folder[index].id
      })
      // 更新文件列表
      this.getFiles()
    },
    // 回到某文件夹下
    goBack(index) {
      if (index === this.breadcrumb.length - 1) return
      this.formData.id = this.breadcrumb[index].id
      this.breadcrumb = this.breadcrumb.slice(0, index + 1)
      this.getFiles()
    },
    // 点击某文件
    clickFile(index) {
      console.log(index)
      alert(this.files.file[index].name)
    },
    // 选中或取消全选
    checkAll(e) {
      this.checkedList = e.target.checked
        ? this.files.file.map(item => item.id)
        : []
    },
    // 点击排序
    sortList() {
      this.formData.reverse = !this.formData.reverse
      this.getFiles()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.home {
  height: 830px;
  width: 1217px;
  .fanyaData {
    padding: 30px;
    min-height: 600px;
    background-color: #ffff;
    // 顶部按钮组
    .btn_group {
      display: flex;
      justify-content: space-between;
      // 上传
      .btn_update {
        padding: 0 22px;
        border: none;
        height: 36px;
        border-radius: 5px;
        background-color: rgb(56, 148, 225);
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
      // 搜索框
      .dataSearch {
        position: relative;
        width: 300px;
        height: 36px;
        // 输入框
        .ipt_val {
          position: absolute;
          left: 0;
          top: 0;
          padding: 0 14px 0 28px;
          outline: none;
          border-color: #d5d7d9;
          width: 170px;
          height: 34px;
          font-size: 14px;
          color: #181e33;
          border: 1px solid #e5e5e5;
          background: #f5f6f7;
          border-radius: 40px;
          &:hover {
            border-color: #3a8bff;
          }
          &:focus {
            border-color: #3a8bff;
          }
        }
        // 放大镜
        .ipt_fdj {
          position: absolute;
          // right: 14px;
          left: 8px;
          top: 8px;
          border: none;
          width: 18px;
          height: 18px;
          background-color: pink;
          background: url(/images/search_ico_new.png);
          background-size: 18px;
          &:hover {
            cursor: pointer;
            background-position: 0 -22px;
          }
        }
        // 搜索按钮
        .ipt_search {
          // width: 40px;
          position: absolute;
          right: 0;
          top: 0;
          padding: 0 22px;
          border: none;
          height: 36px;
          border-radius: 17px;
          background-color: rgb(58, 181, 74);
          color: #fff;
          &:hover {
            cursor: pointer;
            color: #3a8bff;
          }
        }
      }
    }
    .info {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 20px 0 10px 0;
      font-size: 12px;
      color: #8a8b99;
      // 面包屑
      .breadcrumb {
        span:not(:last-child) {
          &:hover {
            cursor: pointer;
            color: #3A8BFF;
          }
          &::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 10px;
            margin: 0 4px;
            background: url(/images/breadcrumb.png);
          }
        }
      }
    }
    // 表格区
    .tableData {
      // 表头
      .table_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        background-color: #f5f6f7;
        font-size: 14px;
        color: #8a8b99;
        .sort_up, .sort_down {
          width: 13px;
          height: 13px;
          margin: 3px 0 3px 6px;
          display: inline-block;
          overflow: hidden;
          vertical-align: middle;
          cursor: pointer;
          background: url(/images/sort_icon.png) no-repeat 0 0;
          background-size: 10px auto;
        }
        .sort_up:hover {
          background-position: 0 -15px;
        }
        .sort_down {
          background-position: 0 -30px;
        }
        .sort_down:hover {
          background-position: 0 -45px;
        }
      }
      // 行布局
      .table_row {
        padding-left: 15px;
        div {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          line-height: 40px;
          height: 100%;
          input {
            width: 18px;
            height: 18px;
            cursor: pointer;
          }
        }
      }
      // 列表
      .table_list {
        margin-top: 10px;
        // 列表项
        .list_item {
          display: flex;
          height: 66px;
          font-size: 14px;
          &.active {
            background-color: #f0f6ff;
          }
          &:hover {
            cursor: pointer;
            background-color: #f0f6ff;
          }
          div {
            line-height: 66px;
            img {
              margin-right: 20px;
              width: 28px;
              height: 28px;
              border-radius: 3px;
            }
            a {
              text-decoration: none;
              font-size: 15px;
              color: #131b26;
              &:hover {
                color: #3A8BFF;
              }
            }
          }
        }
      }
    }
  }
}
</style>
